import React, { Component } from 'react'
import {UserOutlined,MoneyCollectOutlined,ProfileOutlined,AppstoreOutlined} from "@ant-design/icons"

interface IProps { }
interface IStates { }

export default class ProfitLoss extends Component<IProps, IStates>{
    private profitLoss: any[] = [
        {
            icon: <UserOutlined className="icon_style"/>,
            style: {
                backgroundColor: "#F9ACBE",
            },
            num: {
                total: "300000",
                style: {
                    color: "#F9ACBE"
                },
                profitOrLoss: "+133"
            },
            title: "用户数量"
        },
        {
            icon: <MoneyCollectOutlined className="icon_style" />,
            style: {
                backgroundColor: "#af74ef",
            },
            num: {
                total: "550200",
                style: {
                    color: "#af74ef"
                },
                profitOrLoss: "-233"
            },
            title: "生产总数"
        },
        {
            icon: <ProfileOutlined className="icon_style" />,
            style: {
                backgroundColor: "#ff9d89",
            },
            num: {
                total: "95000",
                style: {
                    color: "#ff9d89"
                },
                profitOrLoss: "+991"
            },
            title: "销售总额"
        },
        {
            icon: <AppstoreOutlined className="icon_style" />,
            style: {
                backgroundColor: "#40a3fb",
            },
            num: {
                total: "15000",
                style: {
                    color: "#40a3fb"
                },
                profitOrLoss: "+992"
            },
            title: "好评总数"
        }
    ]
    public render() {
        return (
            <div className="crm-hp-loss">
                {this.profitLoss.map((item: any, index: number) => {
                    return (
                        <div className="profit-loss-item" key={index}>
                            <div className="item-icon" style={item.style}>
                                {item.icon}
                            </div>
                            <div className="num">
                                <div className="total" style={item.num.style}>
                                    {item.num.total}
                                </div>
                                <div className="profit-or-loss">
                                    <p>{item.num.profitOrLoss}</p>
                                </div>
                            </div>
                            <div className="item-title">{item.title}</div>
                        </div>
                    )
                })}
            </div>
        )
    }
}